<template>
    <div>
        <!-- 做一个input输入框和发送按钮 -->
        <div class="commentInputContainer" @click.stop="">
            <!-- <input v-model="postInfo.title" type="text" class="commentInput" placeholder="在这里输入标题"> -->
            <quillEditor 
                v-model="content"
                ref="editorRef"
                :options="editorOption"
                placeholder="在这里输入评论"
            />
            <button class="commentSend" @click="sendComment">发 送</button>
        </div>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import * as Quill from "quill";
import "../assets/css/quillEditor.css"
//quill编辑器的字体
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
];
// 自定义字号的大小
var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: sizes }], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: fonts }], //显示字体选择
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ['link', 'image', 'video'], // 链接、图片、视频-----
];

export default {
    name: 'EditComment',
    components: {
        quillEditor
    },
    props:['type','commentId'],// 0代表修改，1代表添加
    data() {
        return {
            content:'',
            editorOption: {
                theme: "snow",
                modules: {
                toolbar: toolbarOptions,
                },
            },
        };
    },
    mounted(){
       if(this.type==0){
            this.$axios({
                method:'get',
                url:`/api/comments/commentId/${this.commentId}`,
                headers:{
                    'Content-Type':'application/json',
                    'token':localStorage.getItem('token')
                }
            }).then(res=>{
                if(res.data.code){
                    this.content=res.data.data.content
                }
                
            })
       }
    },
    methods: {
        sendComment(){
            if(this.type==0){
                this.$axios({
                    method:'put',
                    url:`/api/comments/update`,
                    headers:{
                        'Content-Type':'application/json',
                        'token':localStorage.getItem('token')
                    },
                    data:{
                        commentId:this.commentId,
                        content:this.content
                    }
                }).then(res=>{
                    if(res.data.code){
                        this.$router.go(0)
                    }
                })
            }else if(this.type==1){
                this.$axios({
                    method:'post',
                    url:`/api/comments`,
                    headers:{
                        'Content-Type':'application/json',
                        'token':localStorage.getItem('token')
                    },
                    data:{
                        commentType:1,
                        replyCommentId:this.commentId,
                        userId:localStorage.getItem('userId'),
                        content:this.content
                    }
                }).then(res=>{
                    console.log(res)
                    if(res.data.code){
                        this.$router.go(0)
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
    .commentInputContainer{
        width: 60%;
        margin-left: 20%;
        height: fit-content;
        background-color: white;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        padding: 10px 25px;
    }
    .commentInput{
        width: 97%;
        height: 30px;
        border-radius: 5px;
        border: 2px solid #aaaaaa;
        margin-bottom: 10px;
        padding: 0 10px;
    }
    .commentSend{
        width: 100%;
        margin-top: 1%;
        height: 33px;
        background-color: #4d4d4d;
        color: #fff;
        border: 2px solid white;
        text-align: center;
        line-height: 33px;
        border-radius: 5px;
        cursor: pointer;
    }
    .commentSend:hover{
        border: 2px solid pink;
        color: pink;
    }
    ::v-deep .ql-editor{
        height: 300px;
    }
</style>